<template>
  <ToolboxWindow title="流量提醒明细" :show="props.show" :width="480">
    <!-- <pre>{{ JSON.stringify(props.dataInfo, null, 2) }}</pre> -->
    <el-descriptions size="small">
      <el-descriptions-item label="更新时间">{{
        props.dataInfo.updatingTime
      }}</el-descriptions-item>
      <el-descriptions-item label="计算耗时"
        >{{ props.dataInfo.lastComsumption }}ms</el-descriptions-item
      >
      <el-descriptions-item label="提醒数量">{{
        props.dataInfo.totalCount
      }}</el-descriptions-item>
    </el-descriptions>
    <el-text type="info" size="small">点击下方信息可查看架次详情</el-text>
    <div style="padding: 6px"></div>
    <el-collapse accordion>
      <el-collapse-item v-for="(c, i) in props.result" :name="'data_' + i">
        <template #title>
          <div
            :style="{
              display: 'flex',
              alignItems: 'center',
              color:
                c.type == 'danger'
                  ? 'var(--el-color-danger)'
                  : c.type == 'warning'
                  ? 'var(--el-color-warning)'
                  : 'var(--el-color-info)',
            }"
          >
            <!-- 图标 -->
            <el-icon v-if="c.type == 'danger'"><CircleCloseFilled /></el-icon>
            <el-icon v-else-if="c.type == 'warning'"><WarningFilled /></el-icon>
            <!--  -->
            <span style="padding-left: 4px">{{ c.from.format("HH:mm") }}</span>
            <span style="padding: 0 2px">至</span>
            <span>{{ c.to.format("HH:mm") }}</span>
            <!--  -->
            <b style="padding: 0 4px">{{ c.remark }} </b>
            <span>{{ c.value }} 架次，预计将</span>
            <span style="padding: 0 2px" v-if="c.type == 'danger'">超过</span>
            <span style="padding: 0 2px" v-else-if="c.type == 'warning'"
              >接近</span
            >
            <span>{{ c.limit }} 架次限制</span>
          </div>
        </template>
        <el-table
          :data="c.details"
          size="small"
          :cell-style="{ backgroundColor: 'transparent' }"
          :row-style="{ backgroundColor: 'transparent' }"
          :header-row-style="{ backgroundColor: 'transparent' }"
          :header-cell-style="{ backgroundColor: 'transparent' }"
        >
          <el-table-column
            prop="tag"
            label="数据标签"
            min-width="150"
          ></el-table-column>
          <el-table-column
            prop="value1"
            label="0.5H架次"
            min-width="80"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="value2"
            label="1H架次"
            min-width="80"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="index"
            label="数据列"
            min-width="80"
            align="center"
          ></el-table-column>
        </el-table>
        <!-- <el-descriptions v-for="d in c.details" size="small" border>
          <el-descriptions-item label="数据标签">{{
            d.tag
          }}</el-descriptions-item>
          <el-descriptions-item label="0.5H架次">{{
            d.value1
          }}</el-descriptions-item>
          <el-descriptions-item label="1H架次">{{
            d.value2
          }}</el-descriptions-item>
        </el-descriptions> -->
      </el-collapse-item>
    </el-collapse>
  </ToolboxWindow>
</template>

<script setup>
import ToolboxWindow from "@/components/ToolboxWindow/index.vue";
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  result: {
    type: Array,
    default: [],
  },
  dataInfo: {
    type: Object,
    defaylt: null,
  },
});
</script>
